
<style scoped>
.container {
	padding: 16px;
	border: 1px solid #efefef;
}

.el-select .el-select--small {
	display: block !important;
}
</style>

<!-- 页面布局-->
<template>
	<div class="table">
		<!-- 主体区 -->
		<div class="container">
			<!-- 表单区 -->
			<div class="form-data-box">
				<el-form
					:model="formBean"
					:rules="validateRules"
					ref="form1"
					label-width="100px"
					class="ruleForm"
					style="width:60%;"
				>
					<el-row>
						<el-col :span="24">
							<el-form-item label="版本" prop="version">
								<el-input :readonly="readOnly" v-model="formBean.version"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-form-item label="卡商" prop="spNo">
								<v-selectpage data="/rps/sp/?isp=10000&pageRows=10&pageIndex=1" :disabled="readOnly" :params="{isp: '10000'}" :page-rows="10" key-field="spNo" show-field="spName" :selected="formBean.spNo" :result-format="resultFormat" :placeholder="formBean.spName || '请选择'" @values="changeSp" >
								</v-selectpage>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-form-item label="鉴权密钥" prop="cipherKey">
								<el-input :readonly="readOnly"  type="textarea" :rows="2" v-model="formBean.cipherKey" ></el-input>
							</el-form-item>
						</el-col> 
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-form-item label="组件类型" prop="versionType">
								<el-select :disabled="readOnly" v-model="formBean.versionType" clearable>
									<el-option v-for="item in dicts.dllVersionType" :key="item.code" :label="item.name" :value="item.code">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col> 
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-form-item label="卡种类型" prop="cardSpeciesId">
								<v-selectpage data="/rps/cardSpecies/?isp=10000&pageRows=10&pageIndex=1" :disabled="readOnly" :params="{isp: '10000'}" :page-rows="10" key-field="cardSpeciesId" show-field="speciesName" :selected="formBean.cardSpeciesId" :result-format="resultFormat" :placeholder="formBean.cardSpeciesName || '请选择'" @values="changeCardSpecies">
								</v-selectpage>
							</el-form-item>
						</el-col> 
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-form-item label="选择文件" prop="fileName" style="margin-bottom: 0;">
								<div class="fxrow">
									<el-input v-model="formBean.fileName"></el-input>
									<el-upload class="upload-demo" action="/dllVersion/" :before-upload="beforeUploadModal"
										multiple :limit="1" :show-file-list="false" accept=".dll">
										<el-button size="small" type="primary" style="vertical-align: top;" @click="clearUploadModal">选择文件</el-button>	
									</el-upload>
								</div>
							</el-form-item>
						</el-col> 
					</el-row>
				</el-form>
			</div>
			<!-- 表单区END -->
			<!-- 按钮操作区 -->
			<span slot="footer" class="form-btn-box">
				<el-button v-if="!readOnly" @click="resetForm('form1')">重 置</el-button>
				<el-button
					v-if="!readOnly"
					type="primary"
					@click="submitForm('form1')"
					v-loading.fullscreen.lock="fullscreenLoading"
				>确 定</el-button>
				<el-button @click="cnacelForm('form1')">取 消</el-button>
			</span>
			<!-- 按钮操作区END -->
		</div>
		<!-- 主体区END -->
	</div>
</template>
<script>
export default {
	data() {
		var validateVersion = (rule, value, callback) =>{
			var zg =  /^[0-9a-zA-Z]{1,15}$/;
			if (!zg.test(value))  {  
				callback(new Error('须为 1 ~ 15 个字符长度的数字或字母'));
			} else {  
				callback();
			}
		};
		var validateSpNo = (rule, value, callback) =>{
			var zg =  /^[0-9a-zA-Z]{1,5}$/;
			if (!zg.test(value))  {  
				callback(new Error('须为 1 ~ 5 个字符长度的数字或字母'));
			} else {  
				callback();
			}
		};
		var validateCipherKey = (rule, value, callback) =>{
			var zg =  new RegExp("[\\u4E00-\\u9FFF]+","g");
			if(value == undefined || value == null || value == ""){
				callback(new Error('请输入密钥'));
			}else if (zg.test(value))  {  
				callback(new Error('密钥当中不应出现中文'));
			} else {  
				callback();
			}
		};
		return {
			// 提交表单的loading设置标识
			fullscreenLoading: false,
			firstLoadedData: "{}",
			// 新增用户表单信息
			formBean: {
				version: "", //版本
				spNo: "", //卡商
				cipherKey: "", //鉴权密钥
				versionType: "", //组件类型
				cardSpeciesId: "",//卡种类型
				fileName: "", //上传组件
			},
			orgid: "",
			orgNotsele:true,
			// 表单校验规则
			validateRules: {
				version: [{ required: true, validator: validateVersion, trigger: "blur" }],
				spNo: [{ required: true, message: "请选择卡商", trigger: "blur" }],
				cipherKey: [{ required: true, validator: validateCipherKey, trigger: "blur" }],
				versionType: [{ required: true, message: "请选择组件类型", trigger: "blur" }],
				cardSpeciesId: [{ required: true, message: "请选择卡种类型", trigger: "blur" }],
				fileName: [{ required: true, message: "请上传组件文件", trigger: "blur" }],
			},
			//所选记录id
			selectedId: "",
			//事物类型
			actType: "",
			// 表单只读状态
			readOnly: false,
			readOnlyEdt: false,
			//字典集
			dicts: {},
			cascaders: {},
			cascaderSelected: {},
			firstOrgid: "",
			file: null
		};
	},
	props: {
		sourceData: {
			required: true
		}
	},
	// 进入页面加载数据
	mounted() {
		this.handleInitLoad();
	},
	methods: {

		/**
		 * 组件初始化加载
		 */
		handleInitLoad() {
			this.initSelectOptoins();
			this.initFormData();
		},

		/**
		 * 初始加载字典选项
		 */
		initSelectOptoins() {
			this.loadSelectOptoins("dllVersionType", null);
		},


		 /**
		 * 通用定义:下拉字典
		 *  @augments dictKind 字典类型
		 */
		loadSelectOptoins(dictKind, params) {
			if(dictKind == "dllVersionType"){
				let url = "/rps/dictionary/";
				this.$axios
				.get(url, {
					params: {
						type: dictKind
					},
					headers:{
						operator: this.$util.getLoginer().userid,
						withCredentials: true
					}
				})
				.then(res => {
					let data = res.data;
					if (data.success) {
						this.$set(this.dicts, dictKind, data.data.list);
					} else {
						console.log(data.message);
						// this.$error( "查询失败" + data.message );
					}
				})
				.catch(err => {
					console.log(err);
				});
			}else{
				let url = "/rps/" + dictKind + "/";
				this.$axios
				.get(url, {
					params: params,
					headers:{
						operator: this.$util.getLoginer().userid,
						withCredentials: true
					}
				})
				.then(res => {
					let data = res.data;
					if (data.success) {
						this.$set(this.dicts, dictKind, data.data.list);
					} else {
						this.$error( "查询失败" + data.message );
					}
				})
				.catch(err => {
					console.log(err);
				});
			}
		},

		/**
		 * 取消返回
		 * @augments formName 表单名称
		 */
		cnacelForm(formName) {
			this.$refs[formName].resetFields();
			this.$emit("cancel", this.cancelData);
		},
		/**
		 * 重置表单
		 * @augments formName 表单名称
		 */
		resetForm(formName) {
			this.formBean = JSON.parse(this.firstLoadedData);
		},
		/**
		 *初始化加载表单数据
		 */
		initFormData() {
			this.selectedId = this.sourceData.seleid;
			this.actType = this.sourceData.actType;
			this.readOnlyEdt = true;
			if (this.actType == "view") {
				// 查看状态 标识表单只读
				this.readOnly = true;
			} else if (this.actType == "add") {
				this.readOnly = false;
				this.readOnlyEdt = false;
				//清空修改保存之后数据还存在的情况
				for (var key in this.formBean) {
					this.formBean[key] = "";
				}
			} else {
				this.readOnly = false;
			}
			var url = "/rps/dllVersion/";
			if (this.actType != null && (this.actType == "upd" || this.actType == "view")) {
				url += this.selectedId +"/";
				this.$axios
					.get(url, {

						headers:{
							operator: this.$util.getLoginer().userid,
							withCredentials: true
						}
					})
					.then(res => {
						let data = res.data;
						this.formBean = {}; 
						if (data.success) {
							this.formBean = data.data;
							if(null == this.formBean.spName || '' == this.formBean.spName) this.formBean.spNo = '';
							if(null == this.formBean.versionTypeName || '' == this.formBean.versionTypeName) this.versionType = '';
							if(null == this.formBean.cardSpeciesName || '' == this.formBean.cardSpeciesName) this.cardSpeciesId = '';
							this.firstLoadedData = JSON.stringify(this.formBean); 
						} else {
							this.$error( data.message );
						}
					})
					.catch(err => { });
			}
		},

		beforeUploadModal(file){
			this.file = file;
			this.$set(this.formBean, "fileName", file.name);
			return false;
		},

		clearUploadModal(){
			this.file = null;
			this.$set(this.formBean, "fileName", "");
		},

		/**
		 * 提交表单
		 * @augments formName 表单名称
		 */
		submitForm(formName) {
			//
			this.$refs[formName].validate(valid => {
				if (valid) {
					let uploadForm = new FormData();
					uploadForm.append("file", this.file);
					uploadForm.append('json', JSON.stringify(this.formBean));
					// 表单校验成功
					if(this.actType == "upd"){
						//
						// 开启提交表单的loading
						this.fullscreenLoading = true;
						var url = "/rps/dllVersion/" + this.selectedId + "/?time=" + new Date().getTime();
						this.$axios
							.put(url, uploadForm, {
								headers:{
									operator: this.$util.getLoginer().userid,
									withCredentials: true
								}
							})
							.then(res => {
								let data = res.data;
								// 关闭提交表单的loading
								this.fullscreenLoading = false;
								if (data.success) {
									this.$message({
										message: "数据保存成功.",
										type: "success"
									});
									this.$emit("ok", {});
								} else {
									this.$error(data.message);
								}
							})
							.catch(err => {
								this.fullscreenLoading = false;
							});
					}else if(this.actType == "add" ){
						var url = "/rps/dllVersion/?time=" + new Date().getTime();
						//
						// 开启提交表单的loading
						this.fullscreenLoading = true;
						this.$axios
							.post(url, uploadForm, {
								headers:{
									operator: this.$util.getLoginer().userid,
									withCredentials: true
								}
							})
							.then(res => {
								let data = res.data;
								// 关闭提交表单的loading
								this.fullscreenLoading = false;
								if (data.success) {
									this.$message({
										message: "数据保存成功.",
										type: "success"
									});
									this.$emit("ok", {});
								} else {
									this.$error(data.message);
								}
							})
							.catch(err => {
								this.fullscreenLoading = false;
							});
					}
				} else {
					// 表单校验失败
					// this.$error("数据校验失败.");
				}
			});
		},

		changeSp(res){
			if(res && res.length > 0){
				let sp = res[0];
				this.$set(this.formBean, "spNo", sp.spNo);
				this.$set(this.formBean, "spName", sp.spName);
			}
		},

		changeCardSpecies(res){
			if(res && res.length > 0){
				let cardSpecies = res[0];
				this.$set(this.formBean, "cardSpeciesId", cardSpecies.cardSpeciesId);
				this.$set(this.formBean, "cardSpeciesName", cardSpecies.speciesName);
			}
		},
		/**
		 * v-selectpage 格式化参数数据
		 */
		resultFormat(resp){
			let data = resp.data;
			 if(data.success){
				return {
					totalRow: data.data ? data.data.count : 0,
					list: data.data ? data.data.list : []
				};
			 } else {
				return {
					totalRow: 0,
					list: []
				};
			 }
		}
	}
};
</script>
